<template>
  <div>
    <a-card title="产品信息">
      <a-row gutter="16">
        <a-col :span="24" style="max-width: 200px; margin-bottom: 12px;">
          <a-input v-model="searchForm.search" placeholder="编号, 名称, 规格" allowClear @pressEnter="search" />
        </a-col>
        <a-col :span="3" :md="3" :xl="3"  style="padding-left: 0px; padding-right: 0px; width: 280px;margin-right: 0px;margin-left: 0px;">
            销售时间:<a-range-picker v-model="dateRange" @change="changeDate" style="width: 200px;" :ranges="ranges"/>
        </a-col>
        <a-col :span="24" style="width: 100px; margin-bottom: 12px;">
          <a-button type="primary" icon="search" @click="search">查询</a-button>
        </a-col>

        <a-col :span="24" style="width: 300px; margin-bottom: 12px;">
          <a-button-group>
            <!-- <a-button icon="file-excel" @click="downloadTemplate">模板下载</a-button> -->
            <!-- <a-upload name="file" :showUploadList="false" :customRequest="importExcel">
              <a-button icon="upload">导入</a-button>
            </a-upload> -->
            <a-button :loading="downloadLoading" @click="handleDownload"><a-icon type="file-excel" />导出</a-button>    
          </a-button-group>
        </a-col>

        <div style="margin-bottom: 12px; float: right;">
          <a-button type="primary" icon="plus" style="margin: 0 8px;" @click="openFormModal(form)">新增产品</a-button>
        </div>
      </a-row>

      <a-row style="margin-top: 12px;">
        <a-table size="small" :columns="columns" :dataSource="items" rowKey="id" :loading="loading" :pagination="pagination"
          @change="tableChange">
          <div slot="is_active" slot-scope="value">
            <a-tag :color="value ? 'green' : 'red'">{{value ? '激活' : '冻结'}}</a-tag>
          </div>
          <div slot="action" slot-scope="value, item">
            <a-button-group>
              <a-button icon="edit" size="small" @click="openFormModal(item)">编辑</a-button>
              <a-popconfirm title="确定删除吗" @confirm="destroy(item.id)">
                <a-button type="danger" icon="delete" size="small">删除</a-button>
              </a-popconfirm>
            </a-button-group>
          </div>
        </a-table>
      </a-row>
    </a-card>
    <form-modal
      v-model="visible"
      :form="targetItem"
      :classificationItems="classificationItems"
      :unitItems="unitItems"
      :warehouseItems="warehouseItems"
      @create="create"
      @update="update" />
    <a-modal v-model="importLoading" :footer="null" :maskClosable="false" :closable="false">
      <div>
        <a-spin style="margin-right: 12px;" />正在导入中, 请等待...
      </div>
    </a-modal>
  </div>
</template>

<script>
  import { exportExcel } from '@/utils/excel'
  import { goodsInformationExport } from '@/api/export'
  import { goodsInformationTemplate, goodsInformationImport } from '@/api/import'
  import { goodsInformationList, goodsInformationDestroy } from '@/api/goods'
  import { goodsClassificationOption, goodsUnitOption, warehousesOption } from '@/api/option'
  import { getGoodsNumber } from '@/api/data'
  import { datetimeToString } from '@/utils/functions';
  import { List} from '@/api/common'

  export default {
    name: 'Warehouse',
    components: {
      FormModal: () => import('./FormModal.vue'),
    },
    data() {
      return {
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            customRender: (value, item, index) => {
              return index + 1
            },
          },
          {
            title: '产品编号',
            dataIndex: 'number',
            sorter: true,
          },
          {
            title: '产品名称',
            dataIndex: 'name',
            sorter: true,
          },
          {
            title: '规格',
            dataIndex: 'spec',
          },
          {
            title: '单位',
            dataIndex: 'unit_name',
          },
          {
            title: '分类',
            dataIndex: 'category_name',
          },
          {
            title: '采购价',
            dataIndex: 'purchase_price',
          },
          {
            title: '零售价',
            dataIndex: 'retail_price',
          },
          {
            title: '库存',
            dataIndex: 'total_quantity',
          },
          {
            title: '销量',
            dataIndex: 'sales_quantity',
          },
          {
            title: '状态',
            dataIndex: 'is_active',
            scopedSlots: { customRender: 'is_active' }
          },
          {
            title: '备注',
            dataIndex: 'remark'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            width: '156px'
          },
        ],
        downloadList: [],
        dateRange: [],//获取本月开始第一天到今天
        ranges: {
        '今日': [moment().startOf('day'), moment().startOf('day')],
        '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        '本周': [moment().week(moment().week()).startOf('week'), moment().week(moment().week()).endOf('week')],
        '上周': [moment().subtract(1,'week').startOf('week'), moment().subtract(1,'week').endOf('week')],
        '本月': [moment().startOf('month'), moment().startOf('day')],
        '上月': [moment().subtract(1,'month').startOf('month'), moment().subtract(1,'month').endOf('month')],
       },
        searchForm: { search: '', page: 1, page_size: 15 },
        pagination: { current: 1, total: 0, pageSize: 15 },
        loading: false,
        items: [],
        classificationItems: [],
        unitItems: [],
        warehouseItems: [],
        visible: false,
        targetItem: {},
        form: {purchase_price:0,retail_price:0,spec:1},
        importLoading: false,
      };
    },
    computed: {
    },
    methods: {
      initialize() {
        this.list();
      },
      list() {
        this.loading = true;
        this.searchForm.start_date=this.dateRange.length > 0 ? this.dateRange[0].format('YYYY-MM-DD') : null
        this.searchForm.end_date=this.dateRange.length > 0 ? this.dateRange[1].format('YYYY-MM-DD') : null
        if (this.searchForm.end_date) {
            this.searchForm.end_date = moment(this.searchForm.end_date).add(1, 'days').format('YYYY-MM-DD');
        }
        goodsInformationList(this.searchForm).then(data => {
          this.pagination.total = data.count;
          this.items = data.results;
        }).finally(() => {
          this.loading = false;
        });
      },
      create(item) {
        // this.items.splice(0, 0, item);
        this.list();
      },
      update(item) {
        this.items.splice(this.items.findIndex(i => i.id == item.id), 1, item);
      },
      search() {
        this.searchForm.page = 1;
        this.pagination.current = 1;
        this.list();
      },
      openFormModal(item) {
        if (!item.id) {
          console.log('item:',item)
          getGoodsNumber().then(data => {
            this.targetItem = { ...item, ...{ number: data.number, image_items: [] } };
          })
        } else {
          console.log('item:',item)
          this.targetItem = { ...item, ...{image_items: item.goods_image_items.map(item => {
            return {
              uid: item.id,
              name: item.name,
              status: 'done',
              url: item.file,
              response: {
                id: item.id
              }
            }
          })} };
        }
        goodsClassificationOption({ page_size: 999999,is_active: true }).then((resp) => {
          this.classificationItems = resp.results;
        });
        goodsUnitOption({ page_size: 999999, is_active: true }).then((resp) => {
          this.unitItems = resp.results;
        });
        warehousesOption({ page_size: 999999, is_active: true }).then((resp) => {
          if (!item.id) {
            this.warehouseItems = resp.results
            console.log(this.warehouseItems)
          } else {
            this.warehouseItems = resp.results.map(warehouseItem => {
              let index = item.inventory_items.findIndex(_item => _item.warehouse == warehouseItem.id);
              if (index != -1) {
                warehouseItem.initial_quantity = item.inventory_items[index].initial_quantity;
                // warehouseItem.initial_quantity = 0;
                warehouseItem.batch_items = item.inventory_items[index].batch_items;
              }
              console.log(this.warehouseItems)
              return warehouseItem
            });
          }
        });
        this.visible = true;
      },
      destroy(id) {
        goodsInformationDestroy({ id }).then(() => {
          // this.items.splice(this.items.findIndex(item => item.id == id), 1);
          this.$message.success('删除成功');
          this.list();
        });
      },
      getNewdownloadList(downloadList) {
          if (downloadList) {
              let i=0
              downloadList.forEach(e => {
                  i+=1
                  e['index'] = i
              });
          } else {
            downloadList = []
          }
      },
      handleDownload() {
        this.loading = true;
        this.downloadLoading = true;
        this.searchForm.start_date=this.dateRange.length > 0 ? this.dateRange[0].format('YYYY-MM-DD') : null
        this.searchForm.end_date=this.dateRange.length > 0 ? this.dateRange[1].format('YYYY-MM-DD') : null
        this.searchForm.page_size=9999
        if (this.searchForm.end_date) {
            this.searchForm.end_date = moment(this.searchForm.end_date).add(1, 'days').format('YYYY-MM-DD');
          }
          List(this.searchForm,'goods').then(response  => {
          const resp = response.data;        
          this.downloadList = response.results;
          this.getNewdownloadList(this.downloadList) 
          // this.downloadList.forEach(e => {
          //     e.jgry_items=this.jgry_items2names(e.jgry_items)
          //     e.is_void=e.is_void?'已作废':"正常"
          // });
          // console.log('this.downloadList:',this.downloadList )
          this.searchForm.page_size=15
          import("@/vendor/Export2ExcelNew").then(excel => {
            const tHeader1 = [
              "序号",
              "编号",
              "名称",
              "规格",
              "产品单位",
              "采购价",
              "零售价",
              "库存",
              "销量",
              "备注",
            ];
            const filterVal = [
              "index",
              "number",
              "name",
              "spec",
              "unit_name",
              "purchase_price",
              "retail_price",
              "total_quantity",
              "sales_quantity",
              "remark",
            ];
            //const filterVal = tHeader;
            //不要将下载数据与显示数据列表用同一个变量，否则要出问题
            const list = this.downloadList;
            let downloadList = list;
  
            const data = this.formatJson(filterVal, downloadList);
            const title = ["产品信息"+datetimeToString(new Date())];
            const sheetname = "产品信息";
            const merges = [ "A1:K1"];
            excel.export_json_to_excel({
              title,
              header: tHeader1,
              // multiHeader:[tHeader1],            
              data,
              filename: "产品信息"+datetimeToString(new Date()),
              merges,
              // autoWidth: this.autoWidth,
              autoWidth: this.autoWidth,
              bookType: this.bookType,
              sheetname
            });
            this.loading = false;
            this.downloadLoading = false;
          });
        });
      },
      formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
      exportExcel() {
        goodsInformationExport(this.searchForm).then(resp => {
          exportExcel(resp.data, '产品信息列表');
        }).catch(err => {
          this.$message.error(err.response.data.error);
        });
      },
      downloadTemplate () {
        goodsInformationTemplate().then(resp => {
          exportExcel(resp.data, '产品信息导入模板');
        }).catch(err => {
          this.$message.error(err.response.data.error);
        });
      },
      importExcel(item) {
        let data = new FormData();
        data.append('file', item.file);
        this.importLoading = true;
        setTimeout(() => {
          goodsInformationImport(data)
            .then(() => {
              this.$message.success('导入成功');
              this.list();
            })
            .catch(err => {
              this.$message.error(err.response.data.detail);
            })
            .finally(() => {
              this.importLoading = false;
            });
        }, 1000);
      },
      tableChange(pagination, filters, sorter) {
        this.searchForm.page = pagination.current;
        this.pagination.current = pagination.current;
        this.searchForm.ordering = `${sorter.order == 'descend' ? '-' : ''}${sorter.field}`;
        this.list();
      },
    },
    mounted() {
      this.initialize();
    },
  }
</script>